<template>
  <div
    class="xb-carousel-3d-slide"
    :style="slideStyle"
    :class="computedClasses"
    @click="goTo()"
  >
    <slot
      :index="index"
      :isCurrent="isCurrent"
      :leftIndex="leftIndex"
      :rightIndex="rightIndex"
    />
  </div>
</template>

<script>
import { Slide } from 'vue-carousel-3d'
export default {
  name: 'slide',
  extends: Slide,
  computed: {
    slideStyle() {
      let styles = {}

      if (!this.isCurrent) {
        const lIndex = this.leftIndex
        const rIndex = this.rightIndex
        if (rIndex >= 0 || lIndex >= 0) {
          styles = rIndex >= 0 ? this.calculatePosition(rIndex, true, this.zIndex) : this.calculatePosition(lIndex, false, this.zIndex)
          // styles.opacity = 1
          styles.visibility = 'visible'
        }

        if (this.parent.hasHiddenSlides) {
          if (this.matchIndex(this.parent.leftOutIndex)) {
            styles = this.calculatePosition(this.parent.leftIndices.length - 1, false, this.zIndex)
          } else if (this.matchIndex(this.parent.rightOutIndex)) {
            styles = this.calculatePosition(this.parent.rightIndices.length - 1, true, this.zIndex)
          }
        }
      }
      return styles
      // return Object.assign(styles, {
      //   'border-width': this.parent.border + 'px',
      //   'width': this.parent.slideWidth + 'px',
      //   'height': this.parent.slideHeight + 'px',
      // 'transition': ' transform ' + this.parent.animationSpeed + 'ms, ' +
      //   '               opacity ' + this.parent.animationSpeed + 'ms, ' +
      //   '               visibility ' + this.parent.animationSpeed + 'ms',
      // '-webkit-transition': ' -webkit-transform ' + this.parent.animationSpeed + 'ms, ' +
      //   '               opacity ' + this.parent.animationSpeed + 'ms, ' +
      //   '               visibility ' + this.parent.animationSpeed + 'ms'
      // })
    }
  }
}
</script>
<style scoped>
.xb-carousel-3d-slide {
  border: none;
  transition: transform 500ms, opacity 500ms, visibility 500ms;
}
.xb-carousel-3d-slide {
  position: absolute;
  top: 0;
  visibility: hidden;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: left;
  opacity: 0.7;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
.xb-carousel-3d-slide.current {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: 999;
}
</style>
